<template>
	<view class="cascadeContianer">
		<view style="height: 30vh;" v-if="loading">
			<u-loading-icon timing-function="linear" :loading='loading'></u-loading-icon>
			<!-- <u-loading-page :loading='loading'></u-loading-page> -->
		</view>
		<template v-else>
			<view class="flex" style="justify-content: space-between;align-items: baseline;">
				<view class="selectDataContainer">
					<view :class="'selectDataItem ' + (index == selectData.length -1?'active':'')"
						v-for="(item, index) in selectData" :key="index">
						<view @click="changView(item, index)">{{item.label}}</view>
						<u-icon size='14' class="selectDataIcon" name="arrow-right" v-if='index != selectData.length -1'></u-icon>
					</view>
				</view>
				<!-- <u-icon size='22' @click="clear()" class="closeIcon" name="trash-fill" v-if='selectData.length > 0'></u-icon> -->
			</view>
			<template v-for="(child,index) in children">
				<view :class="'selectItem ' + (selectData.map(item => item.value).indexOf(child[valueKey]) >= 0?'active':'')"
					@click="loadChild(child)" style="">
					<view>{{ child.name}}</view>
					<view v-if="child.children && child.children.length > 0 "><u-icon name="arrow-right"></u-icon></view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
	export default {
		name: "self-cascade-select",
		props: {
			loading: true,
			changeOnSelect: {
				//点任何一级都往上提交数据
				require: false,
				default: false,
			},
			nameKey: {
				require: false,
				default: 'label'
			},
			valueKey: {
				require: false,
				default: 'value'
			},
			values: {
				require: false,
				default: function() {
					return []
				}
			},
			options: {
				require: false,
				default: function() {
					return []
				}
			}
		},
		watch: {
			values: {
				immediate: true,
				deep: true,
				handler: function(val) {
					this.handleSelectData()
				}
			},
			options: {
				immediate: true,
				deep: true,
				handler: function(val) {
					this.children = val
					this.handleFullData(this.options, 0)
					this.handleSelectData()
				}
			}
		},
		data() {
			return {
				fullData: [],
				children: [],
				selectData: []
			};
		},
		methods: {
			handleSelectData: function() {

				let mid = []
				if (this.values) {
					this.values.forEach(key => {
						for (let i = 0; i < this.fullData.length; i++) {
							let part = this.fullData[i]
							if (part[this.valueKey] == key) {
								mid.push({
									label: part[this.nameKey],
									value: part[this.valueKey]
								})
								break
							}
						}
					})
				}
				this.selectData = mid
				console.log('handleSelectData', this.selectData)
				if (this.selectData.length > 1) {
					let active = this.selectData[this.selectData.length - 2].value
					let arr = this.fullData.filter(part => part[this.valueKey] == active)
					if (arr && arr.length > 0) this.children = arr[0].children
				}
			},
			handleFullData: function(data, level) {
				data.forEach(item => {
					item.level = level
					if (item.children && item.children.length > 0) {
						this.handleFullData(item.children, level + 1)
					}
					this.fullData.push(Object.assign({}, item))
				})
			},
			loadChild: function(item) {
				this.selectData[item.level] = {
					label: item[this.nameKey],
					value: item[this.valueKey],
				}
				this.$forceUpdate()
				if (item.children && item.children.length > 0) {
					this.children = item.children
					if (this.changeOnSelect) {
						this.$emit('change', this.selectData)
					}
				} else {
					this.$emit('change', this.selectData)
				}
			},
			changView: function(item, index) {
				this.selectData = this.selectData.slice(0, index + 1)
				// 显示同层
				if (this.selectData.length > 1) {
					let active = this.selectData[this.selectData.length - 2].value
					let arr = this.fullData.filter(part => part[this.valueKey] == active)
					if (arr && arr.length > 0) this.children = arr[0].children
				} else {
					this.children = this.options
				}
				if (this.changeOnSelect) {
					this.$emit('change', this.selectData)
				}
			},
			clear: function() {
				this.selectData = []
				this.children = this.options
				this.$emit('change', [])
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cascadeContianer {
		height: 100%;
		color: #888;

		.selectDataContainer {
			line-height: 2rem;
			padding: 0 10px;
			display: flex;
			margin-bottom: 10px;
			flex-wrap: wrap;

			.selectDataItem {
				display: flex;
				justify-content: start;
				white-space: nowrap;

				.selectDataIcon {
					margin: 0 5px;
				}
			}

			.selectDataItem.active {
				color: #2979ff;
			}
		}

		.selectItem {
			justify-content: space-between;
			line-height: 2.4rem;
			// padding: ;
			background: #f8f8f8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 5px 0;
			padding: 0 5px;
			border-radius: 3px;
		}

		.selectItem.active {
			background: #2979ff;
			color: #fff;
		}
	}
</style>